<template>
    <div class="ctbsc-detail">

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <van-image :src="image" @click="getImg(index)"/>
            </van-swipe-item>
        </van-swipe>

        <van-cell-group >
            <van-cell title="商品名称" :value="goods.title" size="large" />
            <van-cell title="商品价格" :value="goods.price"  size="large" />
            <van-cell title="商品描述" :value="goods.description"  size="large" />
            <van-cell title="数量" :value="goods.num"  size="large" />
            <van-cell value-class="cell-value" title="所需积分" :value="needPoint"  size="large" />
            <van-cell title="我有积分" :value="user.point"  size="large" />
            <van-cell title="数量"   size="large" >
                <van-stepper min="1" :max="maxNum" @change="changeNum" v-model="exchangeNum" />
            </van-cell>
            <van-cell title="备注" size="large" >
                <van-field
                    v-model="beizhu"
                    rows="1"
                    autosize
                    type="textarea"
                    placeholder="请输入留言"
                />
            </van-cell>
        </van-cell-group>

        <van-divider  :style="{ color: '#ee0a24', borderColor: '#ee0a24', padding: '0 16px' }" content-position="center">收货地址</van-divider>
        <van-address-edit v-if="localStorage.getItem('userId')"
            :address-info="{name:user.name,tel:user.phone}"
            :area-list="areaList"
            save-button-text="兑换"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
        >
        </van-address-edit>
    </div>
</template>

<script>
import { ImagePreview } from 'vant';
import { Toast } from 'vant';
export default {
    name: "GoodsDetail",
    data() {
        return {
            beizhu:'',
            exchangeNum: 1,
            needPoint:0,
            maxNum:1,
            images:[],
            goods:'',
            user:'',
            areaList:{},
        };
    },

    mounted() {
        const id = this.$route.query.id
        this.initArea()
        this.userInfo()
        this.getGoods(id)
        console.log(this.images)
    },

    methods: {
        userInfo(){
            if(localStorage.getItem('userId')){
                this.$myGetHttp(this.$myUrl.user,{id:localStorage.getItem('userId')}).then(res=>{
                    this.user = res.records
                })
            }

        },
        changeNum(value){
            this.needPoint = value * this.goods.point
        },
        onSave(content) {
            Toast.loading({
                duration: 2,
                message: '提交中...',
                forbidClick: true,
            });
            const address = [content.province,content.city,content.county].join(',')+content.addressDetail
            const tel = content.tel
            const name = content.name
            const userid = this.user.id
            const goodsid = this.goods.id
            const exchangenum = this.exchangeNum
            const beizhu = this.beizhu
            this.$myGetHttp(this.$myUrl.exchange,{address,tel,name,userid,goodsid,exchangenum,beizhu}).then(res=>{
                Toast.success(res.msg);
                window.location.reload()
            })
        },
        getGoods(id){
            this.$myGetHttp(this.$myUrl.goodsDetail,{id:id}).then(res=>{
                this.goods = res.records
                this.needPoint = this.goods.point
                this.maxNum = this.goods.num
                this.goods.thumbs.forEach(item=>{
                    this.images.push(item)
                })
            })
        },
        initArea(){
            this.$myGetHttp(this.$myUrl.getChina).then(res=>{
                const areainfo = res.records
                this.areaList = areainfo
            })
        },
        getImg(index){
            ImagePreview({
                images: this.images, // 预览图片的那个数组
                showIndex:true,
                loop:false,
                startPosition:index, // 指明预览第几张图
            })
        },
        onClickLeft() {
            this.$router.push('/list')
        },
    }
}
</script>

<style lang="less" scoped>
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #fff;
    }
    .cell-value{
        color: #ee0a24;
    }
    .van-nav-bar__text{
        color: #ee0a24;
    }
    .van-nav-bar .van-icon{
        color: #ee0a24;
    }
</style>
